<template>
  <el-form
    ref="feedBackForm"
    :model="feedBackForm"
    :rules="rules"
    label-width="100px"
  >
    <el-form-item
      label="反馈类型"
      prop="questionType"
      required
    >
      <el-select
        v-model="feedBackForm.questionType"
        placeholder="请选择"
      >
        <el-option
          v-for="questionType in questionTypes"
          :key="questionType.value"
          :label="questionType.label"
          :value="questionType.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="反馈内容"
      prop="content"
    >
      <el-input
        v-model="feedBackForm.content"
        type="textarea"
        placeholder="请输入6个字以上的反馈内容"
        resize="none"
        :autosize="{minRows: 4, maxRows: 8}"
        maxlength="300"
        show-word-limit
      ></el-input>
    </el-form-item>
    <el-form-item
      label="添加图片"
      prop="fileList"
      v-if="isLogin"
    >
      <el-upload
        ref="upload"
        action=""
        multiple
        list-type="picture-card"
        :limit="5"
        :auto-upload="false"
        :on-change="handleChange"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <div class="tip">* 最多上传5张图片</div>
      <el-dialog :visible.sync="dialogVisible">
        <img
          width="100%"
          :src="dialogImageUrl"
          alt=""
        >
      </el-dialog>
    </el-form-item>
    <el-form-item
      label="联系方式"
      prop="contact"
    >
      <el-input
        v-model="feedBackForm.contact"
        placeholder="QQ、邮箱、手机"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        :loading="loading"
        @click="submitForm"
      >提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { questionTypes } from '@/properties/questionTypes'
import { mapGetters } from 'vuex'
import { storage } from '@/api/file'
import { feedbackContent, touristFeedbackContent } from '@/api/user'
export default {
  name: 'FeedBackForm',
  data () {
    return {
      questionTypes,
      feedBackForm: {
        questionType: 1,
        content: '',
        fileList: [],
        contact: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        questionType: [
          { required: true, message: '请选择反馈类型', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { min: 6, message: '反馈内容最少在6个字以上', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'isLogin'
    })
  },
  methods: {
    submitForm () {
      this.loading = true
      this.$refs.feedBackForm.validate((valid) => {
        if (!valid) {
          this.loading = false
          return
        }
        if (this.isLogin) {
          this.handleFeedBack()
        } else {
          this.handleTouristFeedBack()
        }
      })
    },
    // 登录用户提交反馈
    async handleFeedBack () {
      // 上传图片
      const promises = this.feedBackForm.fileList.map((file) => {
        return storage(file, 3)
      })
      const responses = await Promise.all(promises)
      const url = responses.map(response => response.data).join(',')

      // 提交反馈
      const {
        questionType,
        content,
        contact
      } = this.feedBackForm
      await feedbackContent(questionType, content, url, contact)

      // 反馈完成
      this.$message.success('反馈成功')
      this.resetForm()
      this.loading = false
    },
    // 非登录用户提交表单
    async handleTouristFeedBack () {
      // 提交反馈
      const {
        questionType,
        content,
        contact
      } = this.feedBackForm
      await touristFeedbackContent(questionType, content, contact)

      // 反馈完成
      this.$message.success('反馈成功')
      this.resetForm()
      this.loading = false
    },
    // 重置表单
    resetForm () {
      this.$refs.feedBackForm.resetFields()
      this.$refs.upload.clearFiles()
    },
    // 增加图片
    handleChange (file, fileList) {
      this.feedBackForm.fileList = fileList.map((file) => file.raw)
    },
    // 移除图片
    handleRemove (file, fileList) {
      this.feedBackForm.fileList = fileList.map((file) => file.raw)
    },
    // 图片超出图片
    handleExceed () {
      this.$message.warning('最多上传5张图片')
    },
    // 预约图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  color: $red;
}
</style>
